Skip to main content

Navigation map

The navigation map displays the full chart data range and provides interactive controls for navigating the chart.

It includes:

  • A slider that shows the current visible range
  • Knots that adjust the slider length
  • Arrow buttons for precise navigation

Configuration​

To configure the navigation map, use the ChartConfigComponentsNavigationMap interface:

export interface ChartConfigComponentsNavigationMap {
    visible: boolean;
    allCandlesHistory: boolean;
    timeLabels: {
        visible: boolean;
        dateFormat: string;
        fontFamily: string;
        fontSize: number;
        padding: {
            x: number;
            y: number;
        };
    };
    cursors: {
        chart: CursorType;
        buttonLeft: CursorType;
        buttonRight: CursorType;
        leftResizer: CursorType;
        rightResizer: CursorType;
        slider: CursorType;
    };
    knots: {
        height: number;
        width: number;
        border: number;
        lineWidth: number;
    };
    minSliderWindowWidth: number; // Distance between left edges of slider window drag buttons
}

Time labels​

You can turn on time labels to show the time bounderies of the current viewport.

Defined them using the config.components.navigationMap.timeLabels property:

export const NavigationMapWithTimeLabels = () => {
    return (
        <FlexContainer justifyContent={'flex-start'}>
            <DemoChart
                config={{
                    fixedSize: {
                        height: 440,
                        width: 790,
                    },
                    components: {
                        navigationMap: {
                            visible: true,
                            timeLabels: {
                                visible: true,
                                dateFormat: 'dd.MM.YYYY HH:mm',
                                fontSize: 12,
                                padding: {
                                    x: 10,
                                    y: 0,
                                },
                            },
                        },
                    },
                }}
            />
        </FlexContainer>
    );
}

Further reading​